import React, { Component } from 'react';
import {
    View,
    Text,
    FlatList,
    StyleSheet,
    Modal,
    TouchableOpacity,
    Dimensions,
    Animated, Image
} from 'react-native';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

class LogisticsModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalAnimation: new Animated.Value(0),
        };
    }

    componentDidMount() {
        if (this.props.visible) {
            this.animateIn();
        }
    }

    componentDidUpdate(prevProps) {
        if (this.props.visible && !prevProps.visible) {
            this.animateIn();
        } else if (!this.props.visible && prevProps.visible) {
            this.animateOut();
        }
    }

    animateIn = () => {
        Animated.timing(this.state.modalAnimation, {
            toValue: 1,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };

    animateOut = () => {
        Animated.timing(this.state.modalAnimation, {
            toValue: 0,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };

    render() {
        const translateY = this.state.modalAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [SCREEN_HEIGHT, 0],
        });

        return (
            <View style={styles.modalContainer}>
                <TouchableOpacity
                    style={styles.overlay}
                    activeOpacity={1}
                    onPress={this.props.onClose}
                />
                <Animated.View
                    style={[
                        styles.contentContainer,
                        { transform: [{ translateY }] }
                    ]}
                >
                    <View style={styles.header}>
                        <Text style={styles.title}>{this.props.item.title}</Text>
                    </View>
                    <Text style={styles.content}>{this.props.item.content}</Text>
                </Animated.View>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    overlay: {
        flex: 1,
    },
    contentContainer: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        paddingHorizontal: 16,
        height: SCREEN_HEIGHT * 0.4,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,

    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
    },
    content: {
        fontSize: 14,
        color: '#666',
        lineHeight: 20
    }
});

export default LogisticsModal;